<template>
    <div class="w-full p-8 flex items-center flex-col">
        <a-form :model="formState">
            <div class="flex-between">
                <div class="font-bold">企业微信配置</div>
                <a-button type="link">帮助</a-button>
            </div>
            <a-form-item label="企业ID:" name="enterpriseId" required>
                <a-input v-model:value="formState.enterpriseId" placeholder="请输入企业ID"></a-input>
            </a-form-item>

            <a-form-item label="应用凭证Secret:" name="applicationCredentialSecret" required>
                <a-input v-model:value="formState.applicationCredentialSecret" placeholder="请输入应用凭证Secret"></a-input>
            </a-form-item>

            <a-form-item label="群聊id(用于骑手申请通知):" name="groupChatId">
                <a-input v-model:value="formState.groupChatId" placeholder="请输入群聊id"></a-input>
            </a-form-item>

            <a-button @click.prevent="onSubmit" type="primary" html-type="submit" size="large">提交保存</a-button>
        </a-form>

        <div class="mt-8 w-[500px]">
            <div>创建群聊 生成群ID: </div>
            <div class="my-4">请提交上述配置后, 在创建如下配置, 并提交群聊 id</div>
            <div class="grid grid-cols-2 gap-2 mb-4">
                <div>
                    <div class="mb-4">群名称</div>
                    <a-input v-model:value="group.name" placeholder="请输入群名称"></a-input>
                </div>
                
                <div>
                    <div class="mb-4">群所有者(userId)</div>
                    <a-input v-model:value="group.administratorsID" placeholder="请输入群所有者(userId)"></a-input>
                </div>
            </div>
            <div class="grid grid-cols-3 gap-2 mb-4">
                <div>
                    <div class="mb-4">群成员1(userId)</div>
                    <a-input v-model:value="group.user1_id" placeholder="请输入群成员1(userId)"></a-input>
                </div>
                <div>
                    <div class="mb-4">群成员2(userId)</div>
                    <a-input v-model:value="group.user2_id" placeholder="请输入群成员2(userId)"></a-input>
                </div>
                <div>
                    <div class="mb-4">群成员3(userId)</div>
                    <a-input v-model:value="group.user3_id" placeholder="请输入群成员3(userId)"></a-input>
                </div>
            </div>
            
            <a-button @click.prevent="generateID" type="primary" html-type="submit" size="large">生成群ID</a-button>
        </div>
    </div>
</template>

<script setup lang="ts">
const formState = reactive<{
    [key: string] : string
}>({
    wx_id: '',
    wx_key: '',
    path:''
})


const group = reactive<{
    [key: string] : string
}>({
    name: '骑手审核群',
    administratorsID: '',
    user1_id:'',
    user2_id:'',
    user3_id:'',
})



const onSubmit = () => {
    alert(JSON.stringify(formState))
    reset()
}
const reset = () => {
    Object.keys(formState).forEach((key: string) => {
        formState[key] = ''
    })
}

const generateID = () => {
    alert(JSON.stringify(group))
    resetId()
}

const resetId = () => {
    Object.keys(group).forEach((key: string) => {
        group[key] = ''
    })
}
</script>